<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../js/jquery.js"></script>
<script src="../jquery/js/jquery-ui-1.9.0.custom.js"></script>
<script src="../js/json.js"></script>
<title>分销页面</title>
<style type="text/css">
body {
	font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica,
		sans-serif;
	color: #4f6b72;
	background: #E6EAE9;
}

a {
	color: #c75f3e;
}

#mytable {
	width: 700px;
	padding: 0;
	margin: 0;
}

caption {
	padding: 0 0 5px 0;
	width: 700px;
	font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	text-align: right;
}

th {
	font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	color: #4f6b72;
	border-right: 1px solid #C1DAD7;
	border-bottom: 1px solid #C1DAD7;
	border-top: 1px solid #C1DAD7;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-align: left;
	padding: 6px 6px 6px 12px;
	background: #CAE8EA url(images/bg_header.jpg) no-repeat;
}

th.nobg {
	border-top: 0;
	border-left: 0;
	border-right: 1px solid #C1DAD7;
	background: none;
}

td {
	border-right: 1px solid #C1DAD7;
	border-bottom: 1px solid #C1DAD7;
	background: #fff;
	font-size: 11px;
	padding: 6px 6px 6px 12px;
	color: #4f6b72;
}

td.alt {
	background: #F5FAFA;
	color: #797268;
}

th.spec {
	border-left: 1px solid #C1DAD7;
	border-top: 0;
	background: #fff url(images/bullet1.gif) no-repeat;
	font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}

th.specalt {
	border-left: 1px solid #C1DAD7;
	border-top: 0;
	background: #f5fafa url(images/bullet2.gif) no-repeat;
	font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	color: #797268;
}
</style>
<script type="text/javascript">
	function selectProduct(id){
		var productId=document.getElementById("selectProduct").value;
		$.post("taobaoUpdateOrder.action",{
			"productId":productId,
			"orderId":id
		},
		function(data){
		
		});
	}
	function getlabel(proid){//实现二级级联
		//id是productId
		$.getJSON("getLabelByProductId.action",{
			"productId":proid
		},
		function(data){
			var a=document.getElementById("taobaolabel");
			$("#taobaolabel").text("");
			$.each(data.labellist,function(index,value){
				var b=document.createElement("input");
				b.setAttribute("type", "checkbox");
				b.setAttribute("value", value.labelId);
				var c=document.createTextNode(value.labelName);
				a.appendChild(b);
				a.appendChild(c);
				a.appendChild(document.createTextNode(" "));
			});
		});
	}
</script>
</head>
<body>

	<div style="text-align:left;width:100%;background-color:#94b8e9;margin-bottom:5px;valign:top;margin-left:120px;font-size:20px">
		&nbsp;&nbsp;&nbsp;&nbsp;<strong>订单信息</strong>
	</div>
	
	<c:forEach items="${ordersList}" var="o">
	<div style="float:left;margin-left:120px">
	<div><img src="${o.orderPic }" alt="" width="300px" height="275px"/></div>
	<div>
		<div style="float:left">
			${o.orderItem }&nbsp;
			<select id="selectProduct" style="width:100px" onchange="getlabel(this.value)">
				<c:forEach items="${prolist }" var="p">
					<option value="${p.productId }">${p.productName }</option>
				</c:forEach>
			</select>
		</div>
		&nbsp;&nbsp;&nbsp;&nbsp;
		<input type="button" value="确定产品信息" style="border:0;background-color:#94b8e9;" onclick="selectProduct('${o.orderId }')"/>
	</div>
	</div>
	
	<div style="margin-left:20px"><table id="mytable" cellspacing="0"
		summary="The technical specifications of the Apple PowerMac G5 series">
		
		<tr>
			<th scope="col" abbr="Configurations">订单详细</th>
			<th scope="col">数据内容</th>
		</tr>
		<tr>
			<th scope="row" abbr="G5 Processor" class="specalt">订单ID</th>
			<td class="alt">${o.orderId }</td>
		</tr>
		<tr>
			<th scope="row" abbr="G5 Processor" class="specalt">订单名称</th>
			<td class="alt">${o.orderTheme }</td>
		</tr>
		<tr>
			<th scope="row" abbr="Model" class="spec">收件人</th>
			<td>${o.orderName }</td>
		</tr>
		<tr>
			<th scope="row" abbr="G5 Processor" class="specalt">收件人手机</th>
			<td class="alt">${o.orderMobilePhone}</td>
		</tr>
		<tr>
			<th scope="row" abbr="Frontside bus" class="spec">收件地址</th>
			<td>${o.orderAddress }</td>
		</tr>
		<tr>
			<th scope="row" abbr="L2 Cache" class="specalt">收件邮政编号</th>
			<td class="alt">${o.orderFreight}</td>
		</tr>
		<tr>
			<th scope="row" abbr="L2 Cache" class="specalt">订单时间</th>
			<td class="alt">${o.orderTime_bak }</td>
		</tr>
		<tr>
			<th scope="row" abbr="L2 Cache" class="specalt">订单状态</th>
			<td class="alt">${o.orderState_bak }</td>
		</tr>
		<tr>
			<th scope="row" abbr="L2 Cache" class="specalt">商品数量</th>
			<td class="alt">${o.orderProductsCount }</td>
		</tr>
		<tr>
			<th scope="row" abbr="L2 Cache" class="specalt">商品单价</th>
			<td class="alt">${o.orderTotalPrice }</td>
		</tr>
	</table></div>
	<div id="taobaolabel" style="margin-left:120px">
	</div>
	<br/>
	</c:forEach>
</body>
</html>